import { findTopCategory } from '@/api/category'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { ref } from 'vue'
function useCategory () {
  // 如何在setup中获取路由参数？
  // this.$route.param/query.id
  // useRoute useRoute() -> Route === this.$route
  // 如果我想调用方法 this.$router.push()?

  // 路由缓存机制 -> 组件复用不会重新初始化 -> 生命周期钩子函数不重复执行
  // -> 用来获取数据的函数不会重复调用(只会调用一次) -> id变了  但是请求不会发送 新数据
  // 回不来

  // 如何解决？1.把缓存干掉不走缓存 2.id变化重新执行获取数据的方法

  // 方案一: 给router-view + key  干掉缓存  组件中所有的相关请求都会重新发送一遍 粗暴
  // 方案二: onBeforeRouteUpdate  在路由更新时执行一个回调 回调中发送我们想要发送的接口请求

  // 俩种方案如何选择？
  /**
   * 在绝大多数情况 直接使用key简单粗暴的解决就可以了
   * 如果页面中请求数非常多 组件数非常多 强制更新会导致严重的性能问题 此时就使用方案二
   * 避免提前优化 遇到性能问题再尝试解决！！
   */
  const route = useRoute()
  const categoryData = ref({})
  // 如果给我传了 就使用你传入的 如果没传就使用默认参数
  // 做了参数适配 首次渲染数据使用route.params.id
  // 更新时 使用传入的to.params.id 保证id参数始终是最新的

  async function loadCategory (id = route.params.id) {
    const res = await findTopCategory(id)
    categoryData.value = res.data.result
  }
  loadCategory()
  // 路由更新前执行的回调 每次更新都会执行
  // 在路由更新的时候才会执行 一上来首次的时候也是需要数据的呀？
  onBeforeRouteUpdate((to) => {
    // to: 新路由对象
    console.log(to.params.id)
    // 重新发送我们的获取新数据的请求
    loadCategory(to.params.id)
  })
  return {
    categoryData
  }
}
export default useCategory
